<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="../../base/header.jsp"></jsp:include>
<body style="background-color:#FFF;">
	<div class="page-header">
		<h1>
			产品管理
			<small>
				<i class="icon-double-angle-right"></i>
				产品对接管理
			</small>
		</h1>
	</div>
	<div class="row" style="width: 100%;">
		<div class="col-xs-12">
			<div class="table-responsive">
				<table id="sample-table-1" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th class="center">
								<label>
									<input type="checkbox" class="ace"/>
									<span class="lbl"></span>
								</label>
							</th>
							<th>对接用户</th>
							<th>产品标题</th>
							<th>产品联系方式</th>
							<th>对接时间</th>
							<th>对接状态</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div><!-- /.table-responsive -->
			<div class=" no-margin-top">
				<ul class="pagination pull-right no-margin">
				</ul>
			</div>
			<button class="btn btn-primary btn-xs">
				<i class="single-add icon-edit bigger-160 icon-only" href="#modal-table" data-toggle="modal"></i>
			</button>
			<button class="btn btn-danger btn-xs">
				<i class="batch-del icon-trash bigger-160 icon-only"></i>
			</button>
			<div id="modal-table" class="modal fade" tabindex="-1">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header no-padding">
							<div class="table-header">
							</div>
						</div>
						<div class="modal-body no-padding">
							<form class="form-horizontal" role="form" style="margin-top:2rem;">
								<div id="modal-table-container"></div>
								<div id="modal-table-btn"></div>
							</form>
						</div>
						<div class="modal-footer no-margin-top"></div>
					</div>
				</div>
			</div>
		</div><!-- /span -->
	</div>
	<script src="static/assets/js/bootbox.min.js"></script>
	<script src="static/assets/js/jquery.gritter.min.js"></script>
	<script src="static/plugins/system-plugins.js"></script>
	<script type="text/javascript">
	$(function(){
		var names = [
			{
				name:'id',
				type:'main',
				input:'投诉建议'
			},
			{
				name:'userName',
				input:'对接用户',
				type:"disabled",
				isAdd:false
			},
			{
				name:'productTitle',
				input:function(value,isInit,isChar){
					if(isChar)return '产品标题';
					if(isInit)return '<div class="col-sm-8"><input type="hidden" for-type="combox-select" data-v="id" data-t="title" url="product/all" name="productId" value="" /></div></div>';
					return '<div class="col-sm-8"><input id="form-field-1" class="col-xs-10 col-sm-8" type="text" name="productTitle" value="' + value.productTitle + '" disabled/></div></div>';
				}
			},
			{
				name:'productIntro',
				input:function(value,isInit,isChar){
					if(isChar)return '产品内容';
					return '<div class="col-sm-8"><textarea class="form-control col-xs-10 col-sm-8" rows=5 name="productIntro" disabled>' + value.productIntro + '</textarea></div></div>';
				},
				isTd:false,
				isAdd:false
			},
			{
				name:'contactInfor',
				input:function(value,isInit,isChar){
					if(isChar)return '产品联系方式';
					return '<div class="col-sm-8"><textarea class="form-control col-xs-10 col-sm-8" rows=5 name="contactInfor" disabled>' + value.contactInfor + '</textarea></div></div>';
				},
				isAdd:false
			},
			{
				name:'clickTime',
				type:"hidden"
			},
			{
				name:function(index,value,isForInput){
					if(isForInput)return 'clickState';
					if(value.clickState == 1)return '<td><span class="label label-sm label-success">' + "已联系" + '</span></td>';
					else return '<td><span class="label label-sm label-danger">' + "等待中" + '</span></td>';
				},
				input:function(value,isInit,isChar){
					if(isChar)return '对接状态';
					if(value.clickState == 1){
						return '<label class="col-sm-8"><input name="clickState" checked class="ace ace-switch ace-switch-6" type="checkbox" /><span class="lbl"></span></label></div>';
					}else return '<label class="col-sm-8"><input name="clickState" class="ace ace-switch ace-switch-6" type="checkbox" /><span class="lbl"></span></label></div>';
				},
				isAdd:false
			}
		];
		var parms = {
			pageNum:1,
			pageSize:10
		};
		var urls = {
			load:'product/conn/info',
			detail:'product/conn/detail',
			del:'product/conn/del',
			edit:'product/conn/upd',
			add:'product/conn/add',
			delBatch:'product/conn/delall',
		};
		$.loadTbl(names,parms,urls,null,true);
	});
	jQuery(function($) {
		$('table th input:checkbox').on('click' , function(){
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
			.each(function(){
				this.checked = that.checked;
				if(that.checked == true)$(this).closest('tr').addClass('selected');
				else $(this).closest('tr').removeClass('selected');
			});
				
		});
	
		$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
		function tooltip_placement(context, source) {
			var $source = $(source);
			var $parent = $source.closest('table')
			var off1 = $parent.offset();
			var w1 = $parent.width();
	
			var off2 = $source.offset();
			var w2 = $source.width();
	
			if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
			return 'left';
		}
	})
	</script>
</body>